<script>
import JTableRowHeaderCell from "./JTableRowHeaderCell.vue";
export default {
  props: {
    helper: {
      type: Object,
      required: true,
    },
    rows: {
      type: Array,
      default: () => [],
    },
    width: {
      type: Number,
      default: 40,
    },
    selection: {
      type: Array,
      default: () => [],
    },
  },
  render(h) {
    return h("div", [
      this.rows.map((row, index) => {
        return h(
          JTableRowHeaderCell,
          {
            class: "jtable-row-header-cell",
            style: {
              width: this.width + "px",
            },
            props: {
              helper: this.helper,
              row: row,
              rowIndex: index,
              isSelect:
                this.selection[0] <= index && this.selection[2] >= index,
            },
          },
          index + 1
        );
      }),
    ]);
  },
};
</script>

<style>
.jtable-row-header-cell {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中（可选） */
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  background: #dbdbdb;
  /* border: rgb(154, 154, 154) solid 1px;
    border-bottom: rgb(154, 154, 154) solid 0.5px;
    border-top: rgb(154, 154, 154) solid 0.5px; */
  line-height: 30px;
  overflow: hidden;
}
</style>
